@charset "UTF-8";
@import "reset";
@import "mixin";

$fs:64px;
html {
    font-size: $fs;
}

//将px单位换算成rem单位
@function r($px) {
    @return $px/$fs*1rem
}

//主要内容样式
//主要内容容器样式
body {
    width: 100%;
    background: #f5f5f5;
    //  position: relative;
    //头部样式
    header {
        @include header;
    }
    
    //主要内容
    .content {
        width: 100%;
        //轮播图样式
        .banner {
            width: 100%;
            background: url(../img/banner1.png);
            background-repeat: no-repeat;
            background-size: cover;
            padding-top: r(202px);
            border-top: r(1px) solid #efa949;
            font-size: 0px;
            margin-top: r(140px);
            //轮播图信息&翻页
            .bannerMsg {
                width: 100%;
                background: rgba(0, 0, 0, .5);
                padding: r(18px) r(0px) r(12px) r(0px);
                border-left: r(1px) solid #6c4f38;
                border-right: r(1px) solid #6c4f38;
                >a {
                    font-size: r(27px);
                    color: white;
                    display: block;
                    text-align: center;
                }
                >.spanMsg {
                    margin-top: r(18px);
                    position: relative;
                    >span {
                        font-size: r(17px);
                        color: white;
                        display: inline-block;
                    }
                    >span:first-of-type {
                        margin-left: r(54px);
                    }
                    >span:nth-of-type(2) {
                        margin-left: r(80px);
                    }
                    >span:last-of-type {
                        margin-left: r(268px);
                    }
                    >img:first-of-type {
                        position: absolute;
                        width: r(19px);
                        height: r(18px);
                        left: r(30px);
                        top: r(2.5px);
                    }
                    >img:last-of-type {
                        position: absolute;
                        width: r(21px);
                        height: r(12px);
                        left: r(135px);
                        top: r(5.5px);
                    }
                }
            }
        }
        //顶部内容展示
        .top-msg {
            padding-top: r(31px);
            @include information;
        }
        //中间内容展示
        .middle-msg{
            margin-top: r(25px);            
        }
        .middle-msg,.bottom-msg {
            width: 100%;
            background: white;
            //第一篇资讯
            .middle-first-msg {
                width: r(583px);
                margin: 0 auto;
                font-size: 0;
                padding: r(35px) r(0px) r(47px) r(0px);
                >a:first-child {
                    font-size: r(24px);
                    color: black;
                }
                >.first-msg-threeImg {
                    width: 100%;
                    margin-top: r(20px);
                    padding-bottom: r(11px);
                    >img {
                        width: r(187px);
                        height: r(122px);
                    }
                    >img:nth-child(2),
                    >img:nth-child(3) {
                        margin-left: r(10px);
                    }
                }
                >img:nth-child(3) {
                    width: r(27px);
                    height: r(27px);
                    vertical-align: middle;
                    margin-top: r(-15px);
                }
                span {
                    font-size: r(20px);
                    margin-top: r(14px);
                }
                >span:first-of-type {
                    margin-left: r(9px);
                }
                >span:last-of-type {
                    margin-left: r(140px);
                }
                >a {
                    color: black;
                    >img {
                        width: r(27px);
                        height: r(27px);
                        vertical-align: middle;
                        margin-top: r(-15px);
                    }
                    >span {
                        margin-left: r(5px);
                    }
                }
                >a:nth-of-type(2) {
                    margin-left: r(18px);
                }
                >a:nth-of-type(3) {
                    margin-left: r(21px);
                }
            }
            //第二and第三篇资讯
            .middle-second-msg {
                @include information;
            }
        }
        //加载更多
        >.loading{
            display: block;
            width: 100%;
            background: white;
            text-align: center;
            font-size: r(22px);
            color: black;
            padding: r(19px) r(0px) r(17px) r(0px);
        }
        //空白div
        .null{
            width: 100%;
            height: r(108px);
        }
    }
    //尾部样式
    footer {
        @include footer;
        >a:nth-of-type(3) {
            color: #b60005;
        }
        >a:hover{
            color: #b60005;
        }
    }
}